<template>

    <!--@command="handleMenuItemClick"-->
    <el-dropdown :size="size" :split-button="splitButton" type="primary" class="BlockButtonView"
                 :trigger="trigger" v-bind="$attrs"
                v-on="$listeners">
        <template  v-if="!splitButton">
            <common-button type="primary" :text="text" :style="{minWidth:width+'px'}">
                <i class="el-icon-caret-bottom" v-if="iconShow"></i>
                <!--<i class="el-icon-caret-top"></i>-->
            </common-button>
        </template>
        <template  v-else-if="splitButton">
            {{text}}
        </template>
        <!--<i :class="iconClass" v-if="iconShow"></i>-->
        <el-dropdown-menu slot="dropdown" class="BlockButtonMenuView">
            <el-dropdown-item v-for="(item,index) in list" v-if="!item.hide"
                              :command="item.value"
            >{{item.label}}</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>
<script>

    export default {

        data() {
            return {
//                text : ''
            }
        },
        mounted() {
            
        },
        created: function () {
            console.log("text : " + this.text);
        },
        methods: {
            handleMenuItemClick(command, instance) {
//                this.$emit('command', command);
            }
        },
        props: {
            list:Array,
            defaultText: String,
            trigger: {
                type: String,
                default: 'hover'
            },
            type: String,
            size: {
                type: String,
                default: ''
            },
            text:String,
            iconClass:String,
            splitButton: {
                type: Boolean,
                default: true
            },
            hideOnClick: {
                type: Boolean,
                default: true
            },
            placement: {
                type: String,
                default: 'bottom-end'
            },
            visibleArrow: {
                default: true
            },
            showTimeout: {
                type: Number,
                default: 250
            },
            hideTimeout: {
                type: Number,
                default: 150
            },
            buttonShow:Boolean,
            iconShow:{
                type: Boolean,
                default: true
            },
            width:{
                type:[String,Number],
                default: 80
            }
//            style: String
        },
    }
</script>
<style lang="scss">
    .BlockButtonView{
        width: auto !important;
        .el-dropdown-menu__item {
            padding: 0 10px;
        }
        .el-button--primary.el-button--mini {
            font-size: 13px;
            height: 30px;
            border-radius: 4px;
            line-height: 10px;
            padding: 10px 10px !important;
            background-color: #3A75C3 !important;
            color: #FFFFFF;
            box-shadow: 0px 3px 5px 0px rgba(168, 222, 253, 1);
            border: 1px solid rgba(255, 255, 255, 0.6);
        }
    }
</style>